<template>
	<el-container>
		<el-main>
			<keep-alive>
				<router-view v-if="$route.meta.keepAlive"></router-view>
			</keep-alive>
			<router-view v-if="!$route.meta.keepAlive"></router-view>
		</el-main>
		<el-footer>
			<div class="audio">
				<p>{{currentSong.song}}&nbsp;&nbsp;&nbsp;&nbsp;演唱者：{{currentSong.singer}}</p>
				<audio :src="currentSong.url" autoplay="" controls=""> </audio>
			</div>
		</el-footer>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				//播放数据
				currentSong: {
					url: "./static/audio/南屏晚钟(天籁之战)-华晨宇+苏诗丁.mp3",
					singer: "华晨宇、苏诗丁",
					song: "南屏晚钟(天籁之战)"
				},
			};
		},
		methods: {}
	}
</script>


<style lang="less" scoped>
	.el-container {
		height: 100%;
	}

	.el-footer {
		height: 90px !important;

		.audio {
			position: fixed;
			width: calc(100% - 40px);
			height: 90px;
			bottom: 0;
			background: #F1F3F4;

			p {
				height: 36px;
				text-align: center;
				line-height: 36px;
				margin: 0px;
				overflow-x: hidden;
				overflow-y: hidden;
				white-space: nowrap;
			}

			audio {
				width: 100%;
			}
		}
	}
</style>
